<template>
    <div class="ElPaginationUse">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="paginate.pageNum"
                :page-sizes="[paginate.perPageShow, 30, 50, 100]"
                :page-size="paginate.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="paginate.total"
        ></el-pagination>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
import PaginateModel from "@/project/model/PaginateModel"

@Component({
  components: {}
})
export default class ElPaginationUse extends Vue {
  @Prop({
    default() {
      return new PaginateModel()
    }

  })
  readonly paginate!: any

  mounted() {
    this.reload()
  }

  reload() {}

  handleSizeChange(a) {
    this.paginate.pageSize = a
    this.paginate.changeSizeCallBack()
    this.paginate.changeCallBack()
  }

  handleCurrentChange(a) {
    this.paginate.jump(a)
    this.paginate.changePageCallBack()
    this.paginate.changeCallBack()
  }

}
</script>

<style lang="less" scoped>
    @import "~style/var.less";

    .ElPaginationUse {
    }
</style>